<template>
	<view class="task_oildetail_page">
		<view class="oildetail_nav">
			<view :class="navIndex==1?'c-00A0DC':''" @click="changeNav(1)">兑换明细</view>
			<view class="nav_cell_line"> | </view>
			<view :class="navIndex==2?'c-00A0DC':''" @click="changeNav(2)">订单记录</view>
		</view>
		<view v-if="navIndex==1" class="recordlist_cell_box">
			<view v-for="(item,index) in list" :key="item.id" class="recordlist_cell">
				<view class="task_cell_icon_box">
					<image v-if="item.pic" class="task_cell_icon" :src="picUrl+item.pic" mode="aspectFill"></image>
				</view>
				<view class="ml-10 flex-1">
					<view class="f-13">{{item.name}}</view>
					<view class="f-11 c-999999 mt-5">{{item.create_time}}</view>
				</view>
				<view v-if="item.type==1" class="task_status_ok">{{item.integral_text}}</view>
				<view v-if="item.type==2" class="task_status_red">{{item.integral_text}}</view>
			</view>
			<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
		</view>
		<view v-if="navIndex==2" class="oil_order_cell_box">
			<view v-for="(item,index) in orderlist" :key="item.order_id" class="oil_order_cell"
				@click="goOrderInfo(item.order_id)">
				<view class="oil_order_img_box">
					<image class="oil_order_img" :src="picUrl+item.cover_img" mode="aspectFill"></image>
				</view>
				<view class="oil_order_info">
					<view class="f-13">{{item.goods_name}}</view>
					<view class="f-10 c-999999 mt-10">兑换时间：{{item.pay_time}}</view>
					<!-- <view class="f-10 c-999999">使用有效期：2024-08-05至10-15</view> -->
					<view class="oil_order_info_bottom">
						<view class="f-12 flex-1 c-00A0DC">消耗油滴{{item.order_amount_total}}L</view>
						<view class="f-10 c-999999">查看详情 ></view>
					</view>
				</view>
			</view>
			<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{order_loadingTitle}}</view>
		</view>
		<view class=""></view>
		<view class=""></view>
	</view>
</template>

<script>
	import {
		getIntegralRecordList,
		getTaskOrderList
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				page: 1,
				navIndex: 1,
				list: [],
				current_page: '',
				last_page: '',
				total: '',
				loadingTitle: '',
				order_page: 1,
				orderlist: [],
				order_current_page: '',
				order_last_page: '',
				order_total: '',
				order_loadingTitle: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.navIndex = options.type ? options.type : 1
			if (this.navIndex == 2) {
				this.getTaskOrderList()
			} else {
				this.getIntegralRecordList()
			}
			var params = {
				event_code: '油滴明细',
				path: 'pages/taskcentre/oildetail',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getIntegralRecordList() {
				getIntegralRecordList({
					size: 20,
					page: this.page
				}).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.total = res.data.total
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getTaskOrderList() {
				getTaskOrderList({
					size: 20,
					page: this.order_page
				}).then(res => {
					if (res.state == 1) {
						this.orderlist = [...this.orderlist, ...res.data.data]
						this.order_current_page = res.data.current_page
						this.order_last_page = res.data.last_page
						this.order_total = res.data.total
						if (this.orderlist.length == 0) {
							this.order_loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeNav(type) {
				this.navIndex = type
				if (this.navIndex == 1) {
					this.order_page = 1
					this.list = []
					this.getIntegralRecordList()
				} else {
					this.order_page = 1
					this.orderlist = []
					this.getTaskOrderList()
				}

			},
			goOrderInfo(order_id) {
				uni.navigateTo({
					url: '/pages/taskcentre/giftorderinfo?order_id=' + order_id+'&isShow=false'
				})
				var params = {
					event_code: '油滴明细',
					path: 'pages/taskcentre/oildetail',
					event_id: '',
					title: '',
					source_page: '油滴明细-查看详情',
					value: '',
				}
				app.BurialPoint(params)
			}
		},
		onPullDownRefresh() {
			if (this.navIndex == 1) {
				this.order_page = 1
				this.list = []
				this.getIntegralRecordList()
			} else {
				this.order_page = 1
				this.orderlist = []
				this.getTaskOrderList()
			}
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.navIndex == 1) {
				if (this.current_page < this.last_page) {
					this.page = this.page + 1
					this.getIntegralRecordList()
				} else {
					if (this.list.length > 0) {
						this.loadingTitle = "- 已经到底了 -"
					} else {
						this.loadingTitle = "- 暂无更多 -"
					}
				}
			} else {
				if (this.order_current_page < this.order_last_page) {
					this.order_page = this.order_page + 1
					this.getTaskOrderList()
				} else {
					if (this.orderlist.length > 0) {
						this.order_loadingTitle = "- 已经到底了 -"
					} else {
						this.order_loadingTitle = "- 暂无更多 -"
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.task_oildetail_page {
		padding: 0 35rpx;

		.oildetail_nav {
			position: sticky;
			top: 0;
			z-index: 2;
			color: #000000;
			font-size: 30rpx;
			padding: 50rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f7f7f7;

			.nav_cell_line {
				padding: 0 50rpx;
			}
		}

		.recordlist_cell_box {
			padding: 50rpx 30rpx;
			background-color: #ffffff;

			.recordlist_cell:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			.recordlist_cell {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;

				.task_cell_icon_box {
					width: 75rpx;
					height: 75rpx;
					background-color: #F1F1F1;

					.task_cell_icon {
						width: 75rpx;
						height: 75rpx;
						vertical-align: middle;
					}
				}



				.task_status_ok {
					min-width: 55rpx;
					text-align: center;
					color: #00A0DC;
					font-size: 20rpx;
					padding: 3rpx 15rpx;
					border-radius: 4rpx;
					background-color: #E5F5FB;
					border: 1rpx solid #ADE9FF;
				}

				.task_status_red {
					min-width: 55rpx;
					text-align: center;
					color: #FAA4A4;
					font-size: 20rpx;
					padding: 3rpx 15rpx;
					border-radius: 4rpx;
					background-color: #FFF4F4;
					border: 1rpx solid #FAA4A4;
				}
			}
		}

		.oil_order_cell_box {
			.oil_order_cell {
				display: flex;
				align-items: flex-start;
				margin-bottom: 40rpx;
				padding: 40rpx 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;

				.oil_order_img_box {
					width: 200rpx;
					height: 200rpx;
					background-color: #F1F1F1;

					.oil_order_img {
						width: 200rpx;
						height: 200rpx;
						vertical-align: middle;
					}
				}


				.oil_order_info {
					flex: 1;
					position: relative;
					height: 200rpx;
					margin-top: 2rpx;
					margin-left: 25rpx;

					.oil_order_info_bottom {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						z-index: 0;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>